<template>
	<view class="container">
		<view class="header">
			<view class="headeritem" :class="{headeritems:data.state>0}">
				<text class="text">1</text>
				资质信息
			</view>
			<view class="headeritem" :class="{headeritems:data.state>1}">
				<text class="text">2</text>
				店铺信息
			</view>
			<view class="headeritem" :class="{headeritems:data.state>2}">
				<text class="text">3</text>
				经营信息
			</view>
			<view class="headeritem"  :class="{headeritems:data.state>3}">
				<text class="text">4</text>
				等待审核信息
			</view>
		</view>
		<view class="content" v-if="data.state==1">
			<view class="typelist">
				<view class="typeitem">
					<image src="https://img.fubaozx.cn/static/oldImg/16994999834937.png" mode="" v-if="data.form.types==0" @click="data.form.types=0"></image>
					<image src="https://img.fubaozx.cn/static/oldImg/16995000058612.png" mode="" v-if="data.form.types==1" @click="data.form.types=0"></image>
					<view class="typetext">
						个体工商户
					</view>
				</view>
				<view class="typeitem">
					<image src="https://img.fubaozx.cn/static/oldImg/16995000525758.png" mode="" v-if="data.form.types==1" @click="data.form.types=1"></image>
					<image src="https://img.fubaozx.cn/static/oldImg/16995000797396.png" mode="" v-if="data.form.types==0" @click="data.form.types=1"></image>
					<view class="typetext">
						企业
					</view>
				</view>
			</view>
			<uni-section title="真实姓名">
				<uni-easyinput class="uni-mt-5" @input="data.errmsg!='card为必填字段'?data.errmsg='':''" trim="all" v-model="data.form.username" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>
				<view style="color: red;font-size: 12px;margin-top: 10upx;" v-if="data.errmsg&&data.errmsg!='card为必填字段'">{{data.errmsg!='username为必填字段'?data.errmsg:'真实姓名为必填字段'}}</view>
			</uni-section>
			<uni-section title="身份证号码">
				<uni-easyinput class="uni-mt-5" @input="data.errmsg!='username为必填字段'?data.errmsg='':''" trim="all" v-model="data.form.card" placeholder="请输入内容"   :disabled="data.statetype"></uni-easyinput>
				<view style="color: red;font-size: 12px;margin-top: 10upx;" v-if="data.errmsg&&data.errmsg!='username为必填字段'">{{data.errmsg!='card为必填字段'?data.errmsg:'身份证号码为必填字段'}}</view>
			</uni-section>
			<uni-section title="企业名称" v-if="data.form.types==1">
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.enterprise" placeholder="请输入内容"   :disabled="data.statetype"></uni-easyinput>
			</uni-section>
			<uni-section title="统一社会信用代码" v-if="data.form.types==1">
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.trade_code" placeholder="请输入内容"   :disabled="data.statetype"></uni-easyinput>
			</uni-section>
			<uni-section title="身份证正面">
				<view class="upbox" v-if="!data.form.positive"  @click="$Uplode(positive)">
					<image src="https://img.fubaozx.cn/static/oldImg/16995001139065.png" mode=""></image>
					<view class="">
						上传身份证正面
					</view>
				</view>
				<view class="upboxs" v-else   @click="$Uplode(positive)">
					<image :src="data.form.positive" mode=""></image>
				</view>
			</uni-section>
			<uni-section title="身份证反面">
				<view class="upbox" v-if="!data.form.side"  @click="$Uplode(side)">
					<image src="https://img.fubaozx.cn/static/oldImg/16995001139065.png" mode=""></image>
					<view class="">
						上传身份证反面
					</view>
				</view>
				<view class="upboxs" v-else @click="$Uplode(side)">
					<image :src="data.form.side" mode=""></image>
				</view>
			</uni-section>
			<uni-section title="营业执照"  @click="$Uplode(license)">
				<view class="upbox" v-if="!data.form.license"  @click="$Uplode(license)">
					<image src="https://img.fubaozx.cn/static/oldImg/16995001139065.png" mode=""></image>
					<view class="">
						上传营业执照
					</view>
				</view>
				<view class="upboxs" v-else>
					<image :src="data.form.license" mode=""></image>
				</view>
			</uni-section>
		</view>
		<view class="content" v-if="data.state==2">
			<uni-section title="店铺名称">
				<uni-easyinput class="uni-mt-5" trim="all" maxlength="10" v-model="data.form.name" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>
			</uni-section>
			<uni-section title="门店照片">
				<view class="upbox" v-if="!data.form.shop_head"  @click="$Uplode(shop_head)">
					<image src="https://img.fubaozx.cn/static/oldImg/16995001139065.png" mode=""></image>
					<view class="">
						上传门店照片
					</view>
				</view>
				<view class="upboxs" v-else @click="$Uplode(shop_head)">
					<image :src="data.form.shop_head" mode=""></image>
				</view>
			</uni-section>
			<uni-section title="店铺地址">
				<view class="" style="padding: 20upx;border: 1upx solid #eee;" >
					<!-- {{data.addressstr?data.addressstr:'请选择地址'}} -->
					<lcw-select-address ref="lcwAddressRef" :address="data.address" @change="addresschange"></lcw-select-address>
				</view>
			</uni-section>
			<uni-section title="详细地址" >
				<uni-easyinput type="textarea" v-model="data.form.address" placeholder="请输入内容" :disabled="data.statetype"></uni-easyinput>
			</uni-section>
			<uni-section title="联系电话">
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.mobile" placeholder="请输入内容"   :disabled="data.statetype"></uni-easyinput>
			</uni-section>
			<uni-section title="折扣">
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.discount" type="number" placeholder="请输入内容"   :disabled="data.statetype"></uni-easyinput>
			</uni-section>

		</view>
		<view class="content" v-if="data.state==3">
			<uni-section title="开店方式">
				<uni-data-select v-model="data.form.code" :localdata="data.range" @change="changecode"
					:clear="false"></uni-data-select>
			</uni-section>
			<uni-section title="商铺类型">
				<uni-data-select v-model="data.form.shop_class_id" :localdata="data.shopClassList" @change="changeshopClass"
					:clear="false"></uni-data-select>
			</uni-section>
			<uni-section title="经营范围">
				<uni-easyinput type="textarea" v-model="data.form.trade" placeholder="经营范围不超过200字"  :disabled="data.statetype"></uni-easyinput>
			</uni-section>
			<uni-section title="商铺介绍" >
				<uni-easyinput type="textarea" v-model="data.form.introduce" placeholder="商铺介绍不超过200字" :disabled="data.statetype"></uni-easyinput>
			</uni-section>

			<uni-section title="补充材料">
				<view class="upbox" v-if="!data.form.other"  @click="$Uplode(other)">
					<image src="https://img.fubaozx.cn/static/oldImg/16995001139065.png" mode=""></image>
					<view class="">
						上传补充材料
					</view>
				</view>
				<view class="upboxs" v-else @click="$Uplode(other)">
					<image :src="data.form.other" mode=""></image>
				</view>
			</uni-section>
		</view>
		<view class="content" v-if="data.state==4">

			<view class="lastbox" v-if="!data.errdata">
				<image src="https://img.fubaozx.cn/static/oldImg/1699500155198.png" mode="aspectFill"></image>
				<view class="title">
					提交成功
				</view>
				<view class="titles">
					正在审核处理中，请耐心等待……
				</view>
			</view>
			<view class="lastbox" v-else>
				<image src="https://img.fubaozx.cn/static/oldImg/16995001877708.png" mode="aspectFill"></image>
				<view class="title">
					审核失败
				</view>
				<view class="titles" v-if="data.reason">
					拒绝原因：{{data.reason}}
				</view>
				<view class="titles">
					可<text @click="data.state=1">点击修改</text>后重新提交资料进行审核~
				</view>
			</view>
		</view>
		<!-- <view class="next" @click="data.state++,realName()" v-if="data.state<3"> 暂时注释 -->
		<view class="next" @click="data.state++" v-if="data.state<3">
			下一步
		</view>
		<view class="next" @click="applyBusiness" v-if="data.state==3">
			提交
		</view>
		<view class="bottom" v-if="data.state==3">
			<label class="radio"  @click="checkedchange" ><radio value="r1" :checked="checked" color="#0bc4e3" style="transform:scale(0.7)"/>
			我已阅读并同意<text @click="$goURl('/pages/personal/agreement/agreement?code=2')">《商家入驻协议》</text>
			</label>
		</view>
		<view class="nexts" @click="data.state--" v-if="data.state>1&&data.state<4">
			返回上一步
		</view>
		<view class="next" @click="back" v-if="data.state==4&&!errdata">
			返回个人中心
		</view>

	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		errmsg:'',
		statetype:false,
		shopClassList:'',
		state:1,
		errdata:false,
		value: 0,
		address:{},
		range: [{
				value: 0,
				text: "线上商家"
			},
			{
				value: 1,
				text: "线下商家"
			}
		],
		addressstr:'',
		reason:'',
		form:{
			name:'',//店铺名称
			shop_class_id:'',//店铺分类ID
			code:0,//0线上商家 1 线下商家
			introduce:'',//商家店铺的介绍
			trade:'',//经营范围
			mobile:'',//联系电话
			license:'',//营养执照
			shop_head:'',//门头照或店铺logo
			province:'',//店铺地址省 code为1必填
			city:'',//店铺地址市 code为1必填
			area:'',//店铺地址区 code为1必填
			street:"",//店铺地址街道 code为1必填
			address:'',//店铺详细地址 code为1必填
			other:'',//其他补充材料
			types:0,//
			positive:'',//身份证正面
			side:'',//身份证反面
			username:'',//真实姓名
			card:'',//。身份证号码
			trade_code:'',//社会统一信用代码
			enterprise:'',
			longitude:'',
			latitude:'',
			discount:"",//折扣
		}
	})
	let lcwAddressRef =ref()
	let checked =ref(true)

	onLoad((option) => {
		console.log('位置')
		uni.getLocation({
			type: 'wgs84',
			geocode:true,
			success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					data.form.longitude=res.longitude
					data.form.latitude=res.latitude
			},
			fail:function(err) {
					console.log('fail：' + JSON.stringify(err));
			}
		});
		applyBusinesss()
		shopClassList()
	})
	onShow(() => {
	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log('onReachBottom')
	})
	function back(){
		uni.switchTab({
			url:'/pages/personal/index'
		})
	}
	function checkedchange(){
		checked.value=!checked.value
	}

	function addresschange(value) {//地址选择
		data.address = value;
		data.addressstr=value.province +value.city+ value.area+value.street
		data.form.province=value.province
		data.form.city=value.city
		data.form.area=value.area
		data.form.street=value.street
    uni.request({ //地址换经纬度

      url: `https://restapi.amap.com/v3/geocode/geo?address=${data.form.province+data.form.city+data.form.area+data.form.street}&key=3e2ed72107f91ba0e8a4f25e297eba78`,
      method: "GET",
      success(res) {
        if (res.data.status == 1) {
          const addressarr = res.data.geocodes[0].location.split(",");
          data.form.latitude = Number(addressarr[1])
          data.form.longitude = Number(addressarr[0])
          handelshowMap()

        } else {
          uni.showToast({
            icon: "none",
            title: '请填写地址信息'
          })
        }
      },
    });

	}
  const handelshowMap = () => {
    if (!data.address.province) {
      uni.showToast({
        title: '请先选择省市区',
        icon: 'none'
      })
      return
    }


    uni.chooseLocation({
      latitude:  data.form.latitude,
      longitude:  data.form.longitude,
      success: function(res) {
        // console.log('chooseLocation', res);
        // console.log('位置名称：' + res.name);
        // console.log('详细地址：' + res.address);
        // console.log('纬度：' + res.latitude);
        // console.log('经度：' + res.longitude);
         data.form.longitude = res.longitude
         data.form.latitude = res.latitude
         data.form.detailed = res.name

      },
      fail() {
         data.form.longitude = ''
         data.form.latitude = ''
         data.form.detailed = ''
        addresstr.value = ''
        data.address = {
          province: '',
          city: '',
          area: '',
          street: "",
        }
        lcwAddressRef.value.reset()
      }

    })


  }
	function setSelectAddress(){//打开地址选择弹窗
		lcwAddressRef.value.open();
	}
	function changecode(e) {//商家分类选择
		console.log("e:", e);
		data.form.code=e
		data.form.shop_class_id=''
		shopClassList()
	}

	function positive(e) {//身份证正面上传
		console.log("e:", e);
		data.form.positive=e
	}

	function side(e) {//身份证反面上传
		console.log("e:", e);
		data.form.side=e
	}
	function other(e) {//补充材料
		console.log("e:", e);
		data.form.other=e
	}

	function shop_head(e) {//店铺logo上传
		console.log("e:", e);
		data.form.shop_head=e
	}
	function license(e) {//营业执照上传
		console.log("e:", e);
		data.form.license=e
	}
	function changeshopClass(e){
		data.form.shop_class_id=e
		console.log("e:", data.form.shop_class_id);

	}
	function shopClassList (){//获取分类
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999&code=${data.form.code}`,
			method: 'get',
			success(res) {
				data.shopClassList=res.data.data.map(item=>{
					return {
						value: item.ID,
						text: item.name
					}
				})
			}
		})
	}
	function realName(){//实名
		proxy.$request({
			url: `api/is_real_name/`,
			method: 'post',
			data:{
				username:data.form.username,
				card:data.form.card
			},
			success(res) {
				console.log(res)
				if(res.errno==0){
					data.errmsg=''

				}else{
					data.state--
					data.errmsg=res.errmsg
					// uni.showToast({
					// 	icon:'none',
					// 	title:res.errmsg
					// })
				}
			}
		})
	}
	function applyBusinesss(){//获取审核结果
		proxy.$request({
			url: `api/applyBusiness/`,
			method: 'put',
			success(res) {
				console.log(res)
				if(res.errno==0){
					data.form=res.data
					data.addressstr=res.data.province +res.data.city+ res.data.area
					if(res.data.state==1||res.data.state==3){
						data.statetype=true
					}
					if(res.data.state==2){
						data.errdata=true
						uni.showToast({
							icon:"none",
							title:'审核不通过:'+res.data.reason
						})
						data.reason=res.data.reason
						data.state=4
					}
					if(res.data.state==0){
						uni.showToast({
							icon:"none",
							title:'审核中'
						})
						data.state=4
					}
				}else{
					data.state=1
				}
			}
		})
	}
	function applyBusiness (){
		if (!data.form.enterprise&&data.form.types==1) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写企业名称'
			});
			data.state=1
			return false;
		}
		if (!data.form.trade_code&&data.form.types==1) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写社会统一信用代码'
			});
			data.state=1
			return false;
		}
		if (!data.form.positive) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请上传身份证正面'
			});
			data.state=1
			return false;
		}
		if (!data.form.side) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请上传身份证反面'
			});
			data.state=1
			return false;
		}

		if (!data.form.license) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请上传营业执照'
			});
			data.state=1
			return false;
		}
		if (!data.form.name) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写店铺名称'
			});
			data.state=2
			return false;
		}
		if (!data.form.shop_head) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请上传门头照或店铺logo'
			});
			data.state=2
			return false;
		}

		if (!data.form.mobile) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写联系电话'
			});
			data.state=2
			return false;
		}
		if (!(/^1[3456789]\d{9}$/).test(data.form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '联系电话不正确'
			});
			data.state=2
			return false;
		}
		data.form.discount= parseInt(data.form.discount)
		if (data.form.discount<0||data.form.discount>100) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '折扣需在0-100'
			});
			return false;
		}
		if (!data.form.address&&data.form.code==1) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写店铺详细地址'
			});
			data.state=2
			return false;
		}

		if (!data.form.shop_class_id) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写店铺分类'
			});
			return false;
		}
		if (!data.form.introduce) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写店铺介绍'
			});
			return false;
		}
		if (!data.form.trade) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请填写经营范围'
			});
			return false;
		}
		if (!checked.value) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请同意用户协议与隐私协议'
			});
			return false;
		}
		uni.request({//地址换经纬度
			url: `https://restapi.amap.com/v3/geocode/geo?address=${data.form.province+data.form.city+data.form.area+data.form.address}&key=3e2ed72107f91ba0e8a4f25e297eba78`,
			method: "GET",
			success(res) {
				if (res.data.status == 1) {
					const address = res.data.geocodes[0].location.split(",");
					console.log(address)
					data.form.latitude=Number(address[0])
					data.form.longitude=Number(address[1])
					proxy.$request({//申请
						url: `api/applyBusiness/`,
						method: 'POST',
						data:data.form,
						success(ress) {
							uni.showToast({
								icon:"none",
								title:ress.errmsg
							})

							if(ress.errno==0){
								data.state=4
								// setTimeout(()=>{
								// 	uni.switchTab({
								// 		url:'/pages/personal/index'
								// 	})
								// },1000)
							}
						}
					})
				}else{
					uni.showToast({
						icon:"none",
						title:'请填写地址信息'
					})
				}
			},
		});

	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container {
		padding: 30upx;
		background-color: #fff;
		.header{
			display: flex;
			justify-content: space-between;
			font-size: 24upx;
			padding: 30upx 0;
			.headeritem{
				color: #D6D6D6;
				text-align: center;
				display: flex;
				align-items: center;
				.text{
					background-color:#D6D6D6 ;
					width: 30upx;
					height: 30upx;
					display: block;
					border-radius: 50%;
					color: #fff;
					margin-right: 5upx;
					line-height: 30upx;
					text-align: center;
				}
			}
			.headeritems{
				color: $color1;
				.text{
					background-color: $color1;
				}
			}
		}
		.content {
			.typelist{
				display: flex;
				justify-content: space-around;
				.typetext{
					text-align: center;
					font-size: 28upx;
				}
				image{
					width: 160upx;
					height: 120upx;
				}
			}
			.upbox{
				width: 100%;
				height: 300upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 20upx;
				border: 1upx solid #D6D6D6;
				image{
					width: 70upx;
					height: 70upx;
				}
			}
			.upboxs{
				width: 100%;
				height: 300upx;
				border-radius: 20upx;
				border: 1upx solid #D6D6D6;
				image{
					width: 100%;
					height: 300upx;
				}
			}
			.lastbox{
				text-align: center;
				.title{
						font-size: 28upx;
						font-weight: bold;
						margin: 20upx 0;
				}
				.titles{
						font-size: 24upx;
						color: #999;
						text{
							color: $color1;
						}
				}
			}
		}
		.next{
			background-color: $color4;
			color: #fff;
			text-align: center;
			padding: 20upx;
			border-radius: 20upx;
			margin: 30upx 0;
		}
		.nexts{
			color: $color4;
			text-align: center;
			padding: 20upx;
		}
	}
	.bottom{
		 color: #666666;
		 padding: 20upx;
		 font-size: 10px;
		 text-align: center;
		 text{
			 color: $color4;
		 }
	}
	::v-deep .uni-section-header{
		// padding: 20upx 0 0 0;
	}
</style>
